<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全文复习 - 语文古诗文学习系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .header {
            text-align: center;
            margin-bottom: 3rem;
            color: white;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .home-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            padding: 0.8rem 1.5rem;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            margin-top: 1rem;
        }
        
        .home-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
        
        .articles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        
        .article-card {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            text-align: center;
        }
        
        .article-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
        }
        
        .article-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        
        .article-card h3 {
            font-size: 1.5rem;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        
        .article-card .author {
            color: #7f8c8d;
            margin-bottom: 1rem;
            font-style: italic;
        }
        
        .article-card .description {
            color: #95a5a6;
            line-height: 1.4;
        }
        
        .article-details {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            margin-top: 2rem;
            display: none;
        }
        
        .article-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 3px solid #f0f0f0;
        }
        
        .close-btn {
            background: #e74c3c;
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .close-btn:hover {
            background: #c0392b;
            transform: scale(1.1);
        }
        
        .article-content {
            line-height: 2.2;
            font-size: 1.2rem;
            color: #2c3e50;
            padding: 2rem;
            background: #f8f9fa;
            border-radius: 15px;
            margin-bottom: 2rem;
        }
        
        .verse {
            margin-bottom: 1.5rem;
        }
        
        .word-tooltip {
            font-weight: 600;
            cursor: help;
            border-bottom: 2px dotted;
            position: relative;
        }
        
        .word-tooltip.real-word {
            color: #667eea;
            border-bottom-color: #667eea;
        }
        
        .word-tooltip.function-word {
            color: #28a745;
            border-bottom-color: #28a745;
        }
        
        .tooltip-content {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #2c3e50;
            color: white;
            padding: 0.5rem 0.8rem;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: normal;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
            margin-bottom: 5px;
        }
        
        .word-tooltip:hover .tooltip-content {
            opacity: 1;
            visibility: visible;
        }
        
        .key-sentences {
            background: #fff3cd;
            border-radius: 15px;
            padding: 1.5rem;
            margin: 2rem 0;
        }
        
        .key-sentences h3 {
            color: #856404;
            margin-bottom: 1rem;
        }
        
        .sentence-item {
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: white;
            border-radius: 10px;
            border-left: 4px solid #ffc107;
        }
        
        .original-sentence {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        
        .translation {
            color: #555;
            font-style: italic;
        }
        
        .core-theme {
            background: #d1ecf1;
            border-radius: 15px;
            padding: 1.5rem;
            margin-top: 2rem;
        }
        
        .core-theme h3 {
            color: #0c5460;
            margin-bottom: 1rem;
        }
        
        .core-theme p {
            line-height: 1.8;
            color: #155724;
        }
        
        .hidden {
            display: none !important;
        }
        
        .key-words {
            background: #e8f5e8;
            border-radius: 15px;
            padding: 1.5rem;
            margin: 2rem 0;
        }
        
        .key-words h3 {
            color: #155724;
            margin-bottom: 1rem;
        }
        
        .words-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }
        
        .word-item {
            background: white;
            padding: 1rem;
            border-radius: 10px;
            border-left: 4px solid #28a745;
        }
        
        .word-item.real-word {
            border-left-color: #667eea;
        }
        
        .word-item .word-text {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .word-item.real-word .word-text {
            color: #667eea;
        }
        
        .word-item.function-word .word-text {
            color: #28a745;
        }
        
        .word-item .word-meaning {
            color: #555;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="header">
            <h1>📖 全文复习</h1>
            <p>深入学习经典古诗文，掌握重点词汇和核心思想</p>
            <button class="home-btn" onclick="goHome()">🏠 返回首页</button>
        </div>

        <!-- 文章网格 -->
        <div class="articles-grid" id="articles-grid">
            <div class="article-card" onclick="showArticle('quanxue')">
                <div class="article-icon">📚</div>
                <h3>劝学</h3>
                <div class="author">荀子 · 战国</div>
                <div class="description">通过比喻论证学习的重要性和方法</div>
            </div>
            
            <div class="article-card" onclick="showArticle('shishuo')">
                <div class="article-icon">👨‍🏫</div>
                <h3>师说</h3>
                <div class="author">韩愈 · 唐</div>
                <div class="description">论述从师学习的必要性和重要性</div>
            </div>
            
            <div class="article-card" onclick="showArticle('chibifu')">
                <div class="article-icon">🌙</div>
                <h3>赤壁赋</h3>
                <div class="author">苏轼 · 宋</div>
                <div class="description">月夜泛舟的哲理思考和人生感悟</div>
            </div>
            
            <div class="article-card" onclick="showArticle('dengtaishan')">
                <div class="article-icon">🏔️</div>
                <h3>登泰山记</h3>
                <div class="author">姚鼐 · 清</div>
                <div class="description">冬日登泰山观日出的游记散文</div>
            </div>
            
            <div class="article-card" onclick="showArticle('ziluzengxi')">
                <div class="article-icon">🎓</div>
                <h3>子路、曾皙、冉有、公西华侍坐</h3>
                <div class="author">孔子 · 春秋</div>
                <div class="description">师生对话展现不同的人生理想</div>
            </div>
            
            <div class="article-card" onclick="showArticle('qihuanjinwen')">
                <div class="article-icon">👑</div>
                <h3>齐桓晋文之事</h3>
                <div class="author">孟子 · 战国</div>
                <div class="description">论述王道政治的理想与实践</div>
            </div>
            
            <div class="article-card" onclick="showArticle('paodingjieniu')">
                <div class="article-icon">🔪</div>
                <h3>庖丁解牛</h3>
                <div class="author">庄子 · 战国</div>
                <div class="description">通过解牛技艺阐述养生之道</div>
            </div>
            
            <div class="article-card" onclick="showArticle('zhuzhiwu')">
                <div class="article-icon">🕯️</div>
                <h3>烛之武退秦师</h3>
                <div class="author">左丘明 · 春秋</div>
                <div class="description">智慧外交化解国家危机</div>
            </div>
            
            <div class="article-card" onclick="showArticle('hongmenyan')">
                <div class="article-icon">🍷</div>
                <h3>鸿门宴</h3>
                <div class="author">司马迁 · 汉</div>
                <div class="description">楚汉争霸中的政治博弈</div>
            </div>
            
            <div class="article-card" onclick="showArticle('jianzhuke')">
                <div class="article-icon">📜</div>
                <h3>谏逐客书</h3>
                <div class="author">李斯 · 秦</div>
                <div class="description">劝谏秦王不要驱逐客卿的政论文</div>
            </div>
            
            <div class="article-card" onclick="showArticle('jiantaizongshisisu')">
                <div class="article-icon">👑</div>
                <h3>谏太宗十思疏</h3>
                <div class="author">魏征 · 唐</div>
                <div class="description">向唐太宗进谏的政治论文，提出十思主张</div>
            </div>
            
            <div class="article-card" onclick="showArticle('yuqishu')">
                <div class="article-icon">💌</div>
                <h3>与妻书</h3>
                <div class="author">林觉民 · 近代</div>
                <div class="description">革命志士写给妻子的诀别书，情真意切</div>
            </div>
            
            <div class="article-card" onclick="showArticle('cuzhi')">
                <div class="article-icon">🦗</div>
                <h3>促织</h3>
                <div class="author">蒲松龄 · 清</div>
                <div class="description">通过蟋蟀故事揭露封建社会的黑暗</div>
            </div>
        </div>

        <!-- 文章详情 -->
        <div class="article-details" id="article-details">
            <!-- 文章详情内容将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 文章数据 -->
    <script src="../js/articles/quanxue.js"></script>
    <script src="../js/articles/shishuo.js"></script>
    <script src="../js/articles/chibifu.js"></script>
    <script src="../js/articles/dengtaishan.js"></script>
    <script src="../js/articles/ziluzengxi.js"></script>
    <script src="../js/articles/qihuanjinwen.js"></script>
    <script src="../js/articles/paodingjieniu.js"></script>
    <script src="../js/articles/zhuzhiwu.js"></script>
    <script src="../js/articles/hongmenyan.js"></script>
    <script src="../js/articles/jianzhuke.js"></script>
    <script src="../js/articles/jiantaizongshisisu.js"></script>
    <script src="../js/articles/yuqishu.js"></script>
    <script src="../js/articles/cuzhi.js"></script>
    
    <script>
        // 返回首页
        function goHome() {
            window.location.href = '../index.html';
        }
        
        // 显示文章
        function showArticle(articleId) {
            const articlesGrid = document.getElementById('articles-grid');
            const articleDetails = document.getElementById('article-details');
            
            // 隐藏文章网格
            articlesGrid.classList.add('hidden');
            
            // 根据文章ID加载对应内容
            let articleData;
            if (articleId === 'quanxue') {
                articleData = quanxueData;
            } else if (articleId === 'shishuo') {
                articleData = shishuoData;
            } else if (articleId === 'chibifu') {
                articleData = chibifuData;
            } else if (articleId === 'dengtaishan') {
                articleData = dengtaishanData;
            } else if (articleId === 'ziluzengxi') {
                articleData = ziluzengxiData;
            } else if (articleId === 'qihuanjinwen') {
                articleData = qihuanjinwenData;
            } else if (articleId === 'paodingjieniu') {
                articleData = paodingjieniuData;
            } else if (articleId === 'zhuzhiwu') {
                articleData = zhuzhiwuData;
            } else if (articleId === 'hongmenyan') {
                articleData = hongmenyanData;
            } else if (articleId === 'jianzhuke') {
                articleData = jianzhukeData;
            } else if (articleId === 'jiantaizongshisisu') {
                articleData = jiantaizongshisisuData;
            } else if (articleId === 'yuqishu') {
                articleData = yuqishuData;
            } else if (articleId === 'cuzhi') {
                articleData = cuzhiData;
            }
            
            if (articleData) {
                articleDetails.innerHTML = generateArticleHTML(articleData);
                articleDetails.style.display = 'block';
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        }
        
        // 生成文章HTML
        function generateArticleHTML(articleData) {
            let keyWordsHTML = '';
            if (articleData.keyWords) {
                keyWordsHTML = `
                    <div class="key-words">
                        <h3>📝 重难点实虚词</h3>
                        <div class="words-grid">
                            ${articleData.keyWords.map(word => `
                                <div class="word-item ${word.type}">
                                    <div class="word-text">${word.word}</div>
                                    <div class="word-meaning">${word.meaning}</div>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                `;
            }
            
            return `
                <div class="article-header">
                    <div class="article-title">
                        <h2>${articleData.title}</h2>
                        <div class="author-info">${articleData.author} · ${articleData.dynasty}</div>
                    </div>
                    <button class="close-btn" onclick="hideArticle()">×</button>
                </div>
                
                <div class="article-content">
                    ${articleData.content.map(paragraph => `
                        <div class="verse">${paragraph}</div>
                    `).join('')}
                </div>
                
                ${keyWordsHTML}
                
                <div class="key-sentences">
                    <h3>🔑 重难点句子翻译</h3>
                    ${articleData.keySentences.map(sentence => `
                        <div class="sentence-item">
                            <div class="original-sentence">${sentence.original}</div>
                            <div class="translation">${sentence.translation}</div>
                        </div>
                    `).join('')}
                </div>
                
                <div class="core-theme">
                    <h3>💡 核心思想</h3>
                    <p>${articleData.coreTheme}</p>
                </div>
            `;
        }
        
        // 隐藏文章详情
        function hideArticle() {
            const articlesGrid = document.getElementById('articles-grid');
            const articleDetails = document.getElementById('article-details');
            
            articleDetails.style.display = 'none';
            articlesGrid.classList.remove('hidden');
        }
    </script>
</body>
</html> 